<template>
    <div class="component-md-input">
        <div 
            class="component-md-input__value" 
            :class='{ "focus" : show, "has-content" : value }'>
            <div class="component-md-input__text">{{ text }}</div>
            <transition name='fade'>
                <div class="component-md-input__placeholder" v-show='show && !value'>{{ placeholder }}</div>
            </transition>
            <div class="component-md-input__input">
                <input :value='value' @input='emitValue' :type="type" @focus='show = true' @blur='show = false' @change='emitChange'>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        props:{
            value:[String,Number],
            text:{
                type: String,
                default:''
            },
            placeholder:{
                type: String,
                default:''
            },
            type:{
                type: String,
                default:'text'
            },
        },
        data() {
            return {
                show:false,
                show_options:false
            }
        },
        computed:{

        },
        methods:{
            emitValue(event){
                let val = event.target.value
                this.$emit('input', val);
            },
            emitChange(event){
                let val = event.target.value
                this.$emit('change', val);
            },
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    
    .component-md-input{
        flex:1;
    }
    .component-md-input__value{
        position: relative;
        &:after{
            transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
            content:'';
            position: absolute;
            bottom:0;
            left:0;
            right:0;
            border-bottom:2px solid $orange;
            transform:scaleX(0);
        }
        &.focus{
            .component-md-input__text{
                color:$orange;
                transform:scale(0.75) translate3d(0px, -30px ,0);
            }
            &:after{
                content:'';
                position: absolute;
                bottom:0;
                left:0;
                right:0;
                border-bottom:2px solid $orange;
                transform:scaleX(1);
            }
        }
        &.has-content{
            .component-md-input__text{
                transform:scale(0.75) translate3d(0px, -30px ,0);
            }
        }
    }
    .component-md-input__text{
        @extend %font-subhead;
        transform-origin: left top 0px;
        transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        position: absolute;
        bottom:7px;
        left:0;
    }
    .component-md-input__placeholder{
        @extend %font-subhead;
        position: absolute;
        bottom:7px;
        left:0;
    }
    .component-md-input__input{
        input{
            @extend %font-subhead;
            padding:4px 7px 7px 0;
            position: relative;
            z-index:2;
            width: 100%;
        }
        border-bottom:1px solid $sectionColor;
    }
</style>


